<template>
    <div style="height:255px" ref="assemble-left-module3-chart"></div>
</template>
<script>
import * as echarts from 'echarts';
export default {
    props: {
        data: Array
    },
    data() {
        return {
            chart: null,
        }
    },
    watch: {
        data: {
            handler(oldV, newV) {
                setTimeout(() => {
                    this.showChart(this.chart, 'assemble-left-module3-chart', this.getOption1())
                }, 100);
            },
            immediate: true
        }
    },
    methods: {
        showChart(intance, id, option) {
            if (!intance) {
                intance = echarts.init(this.$refs[id]);
            } else {
                intance.clear();
            }
            intance.setOption(option);
        },
        getOption1() {
            let serie = {
                type: 'pictorialBar',
                symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
            }
            return {
                tooltip: this.getTooltipItem(),
                title: {
                    text: '近五年人才流入/流出人数：人',
                    left: 20,
                    top: 15,
                    textStyle: {
                        color: '#FFF',
                        fontSize: 16
                    }
                },
                legend: {
                    icon: 'rect',
                    itemWidth: 8,
                    itemHeight: 8,
                    textStyle: {
                        color: '#FFF',
                        fontSize: 16
                    },
                    right: 20,
                    top: 15
                },
                grid: {
                    bottom: 45,
                    top: 60,
                    left: 58,
                    right: 20
                },
                xAxis: {
                    data: this.data.map(e => e.name),
                    axisLabel: {
                        color: '#FFF'
                    },
                    axisTick: {show: false},
                    name: '年度',
                    nameLocation: 'start',
                    nameTextStyle: {
                        color: '#FFF',
                        lineHeight: 28,
                        verticalAlign: "top",
                    },

                    axisLine: {
                        show: false,
                    },
                    nameGap: 10
                },
                yAxis: [{

                    splitNumber: 5,
                    nameTextStyle: {
                        color: '#FFF',
                        fontSize: 16,
                        padding: [0, 0, 0, 0]
                    },
                    axisLabel: {
                        color: '#FFF'
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255,255,255, 0.16)',
                            type: 'dashed',
                            dashOffset: 2
                        }
                    },
                }],
                series: [{
                    name: '人才流入',
                    data: this.data.map(e => e.value1),
                    yAxisIndex: 0,

                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 1, color: 'rgba(8,132,255,1)'
                            }, {
                                offset: 0.2, color: 'rgba(8,132,255,0.5)'
                            }, {
                                offset: 0, color: 'rgba(8,132,255,0)'
                            }]
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function(value) {
                            return `{a|${value.data}}\n{dot| }`
                        },
                        rich: {
                            dot: {
                                width: 4,
                                height: 4,
                                borderColor: '#0884FF',
                                align: 'center',
                                borderWidth: 1,
                                borderRadius: 2
                            },
                            a: {
                                color: 'white',
                                align: 'center',
                                padding: 2,
                                fontSize: 14
                            }
                        }
                    },
                    ...serie
                },{
                    name: '人才流出',
                    barGap: '-30%',
                    yAxisIndex: 0,
                    data: this.data.map(e => e.value2),
                    itemStyle: {
                        color: {
                            type: 'linear',
                            x: 0, y: 0,
                            x2: 0, y: 1,
                            colorStops: [{
                                offset: 1, color: 'rgba(255,160,10,1)'
                            }, {
                                offset: 0.2, color: 'rgba(255,160,10,0.5)'
                            }, {
                                offset: 0, color: 'rgba(255,160,10,0)'
                            }]
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        formatter: function(value) {
                            return `{a|${value.data}}\n{dot| }`
                        },
                        rich: {
                            dot: {
                                width: 4,
                                height: 4,
                                borderColor: '#FFA00A',
                                align: 'center',
                                borderWidth: 1,
                                borderRadius: 2
                            },
                            a: {
                                color: 'white',
                                align: 'center',
                                padding: 2,
                                fontSize: 14
                            }
                        }
                    },
                    ...serie
                }]
            }
        },
        getTooltipItem() {
            return {
                borderWidth: 1,
                borderColor: 'rgba(8,132,255,0.4)',
                backgroundColor: 'rgba(2,32,61,0.72)',
                trigger: 'axis',
                formatter: function(params) {
                    console.log(params)
                    let child = '';
                    for(let i = 0; i < params.length; i++) {
                        child += `<div style="display:flex;align-items:center;color:#FFF;font-size:16px;padding:8px 0">
                        <div style="width:8px;height:8px;background:${typeof(params[i].color) == 'string' ? params[i].color: params[i].color.colorStops[0].color};"></div>
                        <div style="padding-left:8px">${params[i].seriesName}</div>
                        <div style="color:#64E6E2;padding:0 4px">${params[i].data}</div>
                        </div>`
                    }
                    return child;

                }
            }
        },
    }
}
</script>
<style lang="less" scoped>

</style>
